<!DOCTYPE HTML>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>系统管理</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
    <link href="css/animate.min.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div id="appP">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">

            <div class="col-sm-12">
                <!-- Example Events -->
                <!--<h4 class="example-title">事件</h4>
                    <div class="example">
                        <div class="alert alert-success" id="examplebtTableEventsResult" role="alert">
                            事件结果
                        </div>-->
                        <div class="btn-group hidden-xs" id="toolbar" role="group">
                            <button type="button" @click="addModel" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                            </button>
                            <button type="button"  class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
                            </button>
                            <button type="button" id="delBatch" onclick="delBatch()" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            </button>
                        </div>
                        <table id="table"  data-mobile-responsive="true"></table>
                    </div>
                </div>
                <!-- End Example Events -->
            </div>
        </div>
    </div>
    <!-- End Panel Other -->

    <!-- 添加模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><span>新增</span></h4>
                </div>
                <form id="formData">
                <div class="modal-body">
                    <div class="form-group">
                        <label>资源名称</label>
                        <input type="text" name="resName" class="form-control" required="required"  placeholder="资源名称">
                    </div>
                    <div class="form-group">
                        <label>资源类型</label>
                        <input type="text" name="resType" class="form-control" required="required"  placeholder="资源类型">
                        <input type="hidden" name="parentId" id="parentId" class="form-control" required="required"  placeholder="parentId">
                    </div>
                    <div class="form-group">
                        <label>权限</label>
                        <input type="text" name="permission" class="form-control" required="required"  placeholder="权限">
                    </div>
                    <div class="form-group">
                        <label>url</label>
                        <input type="text" name="url" class="form-control" required="required"  placeholder="url">
                    </div>
                    <div class="form-group">
                        <label>icon</label>
                        <input type="text" name="icon" class="form-control" required="required"  placeholder="icon">
                    </div>
                    <div class="form-group">
                        <label>设置为最外层菜单</label><br>
                        <input type="radio"  value="1" id="radio" name="optionsRadios">是</label>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                        </button>
                        <button type="button" class="btn btn-primary" id="save" data-dismiss="modal" @click.stop="save">
                            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true" ></span>保存
                        </button>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>


    <!-- 修改模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><span>修改</span></h4>
                </div>
                <form id="formDataE">
                    <div class="modal-body">
                        <div class="form-group">
                            <label>资源名称</label>
                            <input type="text" name="resName" id="resName"  class="form-control" required="required"  placeholder="资源名称">
                        </div>
                        <div class="form-group">
                            <label>资源类型</label>
                            <input type="text" name="resType" id="resType" class="form-control" required="required"  placeholder="资源类型">
                            <input type="hidden" name="parentId" id="parentIdE" class="form-control" required="required"  placeholder="parentId">
                            <input type="hidden" name="id" id="id" class="form-control" required="required"  placeholder="id">
                            <input type="hidden" name="_method" value="PUT" class="form-control" required="required"  placeholder="">
                        </div>
                        <div class="form-group">
                            <label>权限</label>
                            <input type="text" name="permission" id="permission" class="form-control" required="required"  placeholder="权限">
                        </div>
                        <div class="form-group">
                            <label>url</label>
                            <input type="text" name="url" id="url" class="form-control" required="required"  placeholder="url">
                        </div>
                        <div class="form-group">
                            <label>icon</label>
                            <input type="text" name="icon" id="icon" class="form-control" required="required"  placeholder="icon">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="edit" data-dismiss="modal">
                                <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true" ></span>保存
                            </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script src="js/tree.js"></script>

<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
<script type="text/javascript">



    $(function() {
        var c = [
            { field: 'check',  checkbox: true, formatter: function (value, row, index) {
                    if (row.check == true) {
                        // console.log(row.serverName);
                        //设置选中
                        return {  checked: true };
                    }
                }
            },
            { field: 'resName',  title: '资源名称' },
            { field: 'resType',  title: '资源类型' },
            // {field: 'id', title: '编号', sortable: true, align: 'center'},
            // {field: 'pid', title: '所属上级'},
            { field: 'status',  title: '状态', sortable: true,  align: 'center', formatter: 'statusFormatter'  },
            { field: 'permission', title: '权限值'  },
            { field: 'url', title: 'url'  },
            { field: 'icon', title: 'icon'  },
            { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
        ];
        //1.初始化Table
        var oTable = new TableTree('#table', 'http://127.0.0.1:8085/sysPermission', c);
        oTable.Init();

        //添加
        $("#save").click(function () {

            if ($("#radio").is(":checked") == true){
                $("#parentId").val(0);
            }
            $.ajax({
                url: "http://127.0.0.1:8085/sysPermission/",
                type: "POST",
                dataType: "json",
                data: $("#formData").serialize(),
                success: function (data) {
                    if (data == true) {
                        $("#table").bootstrapTable('refresh');
                    }
                }
            })
        })

        //修改
        $("#edit").click(function () {
            $.ajax({
                url: "http://127.0.0.1:8085/sysPermission/",
                type: "POST",
                dataType: "json",
                data: $("#formDataE").serialize(),
                success: function (data) {
                    if (data == true) {
                        $("#table").bootstrapTable('refresh');
                    }
                }
            })
        })

    });


</script>

<script>
    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas,row,id,pid,checked) {
        for(var i in datas){
            if(datas[i][pid] == row[id]){
                datas[i].check=checked;
                selectChilds(datas,datas[i],id,pid,checked);
            };
        }
    }

    function selectParentChecked(datas,row,id,pid){
        for(var i in datas){
            if(datas[i][id] == row[pid]){
                datas[i].check=true;
                selectParentChecked(datas,datas[i],id,pid);
            };
        }
    }

    function delBatch() {
        var selRows = $("#table").bootstrapTable("getSelections");
        if(selRows.length == 0){
            alert("请至少选择一行");
            return;
        }
        var postData = "";
        $.each(selRows,function(i) {
            postData +=  this.id;
            if (i < selRows.length - 1) {
                postData += ",";
            }
        });
        del(postData);
    }

    function del(ids) {
        $.ajax({
            url: "http://127.0.0.1:8085/sysPermission/" + ids,
            type: "POST",
            dataType: "json",
            data: {_method: "delete"},
            success: function (data) {
                if (data == true) {
                    $("#table").bootstrapTable('refresh');
                }
            }
        })
    }

    function add(id) {
        $('#myModal').modal();
        $("#parentId").val(id);
    }


    function update(row) {
        console.log(row)
        $('#editModal').modal();
        $("#parentIdE").val(row.parentId);
        $("#id").val(row.id);
        $("#resName").val(row.resName);
        $("#resType").val(row.resType);
        $("#permission").val(row.permission);
        $("#url").val(row.url);
        $("#icon").val(row.icon);
    }

</script>
<script type="text/javascript">

    var bm = new Vue({
        el: '#appP',
        data: {
            roleName: '',
            flag: true
        },
        beforeCreate() {

        },
        methods: {
            addModel() {
                $('#myModal').modal();

            },
            save() {
                this.$http.post('http://127.0.0.1:8085/sysPermission', {}, {emulateJSON: true}).then(function (res) {
                    if (res.status == 200) {
                        $("#myModal").modal('hide');
                        $("#table").bootstrapTable('refresh');
                    }
                }, function (res) {
                    console.log(res.status);
                });
            },

            edi() {
                $('#myModal').modal();
            }

        },
        // 渲染后执行
        mounted() {
            // this.getMenus(); // 调用数据初始化函数
        },
    })

</script>
</html>
